<template lang="html">
  <div class="shopheader-wrapper">
      <div class="back">
          <router-link tag="i" to="/index" class="icon iconfont icon-back"></router-link>
      </div>
      <div class="shop-main">
          <img :src="seller.avatar" alt="">
          <div class="shop-content">
              <h4>{{seller.name}}</h4>
              <div class="shop-dilivery">
                  <span>商家配送 / {{seller.deliveryTime}} 分钟送达 / 配送费￥{{seller.deliveryPrice}} 元</span>
                  <i class="icon iconfont icon-jiantou1"></i>
              </div>
              <div class="shop-notice">
                  <span>公告 : </span>
                  <span>欢迎光临用餐高峰下单</span>
              </div>
          </div>
      </div>
      <div class="background">
          <img :src="seller.avatar" width="100%" height="100%" alt="">
      </div>
  </div>
</template>

<script>
export default {
	props: {
		seller: {
			type: Object
		}
	}
}
</script>

<style lang="less">
@import '../../../static/var.less';
.shopheader-wrapper {
    height: @base*262rem;
    position: relative;
    background: rgba(7,17,27,0.4);
    .back {
        height: @base*56rem;
        padding: @base*8rem @base*20rem;
        i {
            padding: @base*10rem;
            color: #fff;
            font-size: @base*50rem;

        }
    }
    .shop-main {
        height: @base*130rem;
        padding: 0 @base*10rem;
        display: flex;
        justify-content: space-between;
        img {
            width: @base*126rem;
            height: @base*126rem;
            border: 1px solid #fff;
            border-radius: 10px;
        }
        .shop-content {
            position: relative;
            width: @base*550rem;
            h4 {
                font-size: @base*32rem;
                padding: 0;
                margin: 0;
                color: #fff;
            }
            .shop-dilivery {
                display: flex;
                justify-content: space-between;
                font-size: @base*12rem;
                color: #fff;
            }
            .shop-notice {
                font-size: @base*10rem;
                color: #fff;
            }
        }
    }
    .background {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        filter:blur(10px);
    }
}
</style>
